<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 凡人
  Date: 2021/12/3
  Time: 12:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <!--视口 自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.js" rel="script"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.js" rel="script"></script>
    <script src="${pageContext.request.contextPath}/static/My97DatePicker/WdatePicker.js" rel="script"></script>

</head>
<body>
    <form action="" method="post">
        出库单号:<input type="text" name="id" readonly="readonly" value="${l}">
        出库日期:<input type="text" name="orderDate" value="${o.orderDate}" readonly="readonly" onclick="WdatePicker()">
        附件:<input type="file" name="file" onchange="upFile(this)" ><span></span>
        <div id="pic" style="color: red">
            <input name="image" value="${o.image}">
        </div><br>
        制单人工号:<input type="text" name="preparedId" value="${user.id}">
        制单人:<input type="text" name="preparedBy" value="${user.username}${user.id}">
        制单时间:<input type="text" name="preparedDate"  value="${o.preparedDate}" readonly="readonly" onclick="WdatePicker()"><br><br>
        出库总金额:<input type="text" readonly="readonly" value="${o.orderPrice}" name="orderPrice"><br><br>
        客户单号列表:<input type="text" name="clientid" value="${o.clientid}">
        发货单号列表:<input type="text" name="sendid" value="${o.sendid}"><br><br>
        备注:<input type="text" name="content"><br><br>

        <input type="button" onclick="addCo()" value="添加">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">仓库编号</th>
                <th scope="col">仓库名称</th>
                <th scope="col">库区</th>
                <th scope="col">物料编号</th>
                <th scope="col">物料名称</th>
                <th scope="col">出库价</th>
                <th scope="col">数量</th>
                <th scope="col">出库金额</th>
                <th scope="col">发货总金额</th>
                <th scope="col">差额</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
                <tr>
                    <td><input type="text" name="lists[0].depotid"></td>
                    <td><input type="text" name="lists[0].depotname"></td>
                    <td><input type="text" name="lists[0].depot"></td>
                    <td><input type="text" name="lists[0].feedid"></td>
                    <td><input type="text" name="lists[0].feed"></td>
                    <td><input type="text" name="lists[0].price" onblur="js(0)"></td>
                    <td><input type="text" name="lists[0].num" onblur="js(0)"></td>
                    <td><input type="text" name="lists[0].outPrice" class="sum"></td>
                    <td><input type="text" name="lists[0].money"></td>
                    <td><input type="text" name="lists[0].agio"></td>
                    <td>
                        <a href="javascript:void(0)" onclick="shipping()">发货</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" id="but" value="提交">
    </form>
</body>
<script>

    //发货
    function shipping(){
        $("#nav-tabContent").load("./shipping?"+$("form").serialize());
    }

    //添加
    $("#but").click(function(){
        $.post("./add",$("form").serialize(),function(msg){
            if(msg=="ok"){
                $("#nav-tabContent").load("./list");
            }
        })
    })

    //图片
    function upFile(obj){
        var formData = new FormData();
        formData.append("file",obj.files[0]);
        $.ajax({
            url:"upFile",
            data:formData,
            type:'post',
            contentType:false,
            processData:false,
            success:function(url){
                $("#pic").empty();
                if(url.code==200){
                    $("#pic").append("<input type='text' name='image' value='"+url.msg+"'>");
                }else{
                    $("#pic").text(url.msg);
                }
            }
        })
    }

    //添加行
    var i = 1;
    function addCo(){
        $("#tbody").append('<tr> ' +
            '<td><input type="text" name="lists['+i+'].depotid"></td> ' +
            '<td><input type="text" name="lists['+i+'].depotname"></td> ' +
            '<td><input type="text" name="lists['+i+'].depot"></td> ' +
            '<td><input type="text" name="lists['+i+'].feedid"></td> ' +
            '<td><input type="text" name="lists['+i+'].feed"></td> ' +
            '<td><input type="text" name="lists['+i+'].price" onblur="js('+i+')"></td> ' +
            '<td><input type="text" name="lists['+i+'].num" onblur="js('+i+')"></td>' +
            '<td><input type="text" name="lists['+i+'].outPrice" class="sum"></td> ' +
            '<td><input type="text" name="lists['+i+'].money"></td> ' +
            '<td><input type="text" name="lists['+i+'].agio"></td> ' +
            '<td> ' +
            '<a href="javascript:void(0)" onclick="addCol()">发货</a> ' +
            '<a href="javascript:void(0)" onclick="remCol()">删除</a> ' +
            '</td> ' +
            '</tr>')
        i++;
    }
    function remCol(obj){
        $(obj).parent().parent().remove();
    }
    function js(i){
        var price = $("[name='lists["+i+"].price']").val();
        var num = $("[name='lists["+i+"].num']").val();
        if((price*num)!=0){
            $("[name='lists["+i+"].outPrice']").val(Number(price)*Number(num));
        }
        sum();
    }
    function sum(){
        var s = 0;
        $(".sum").each(function(){
            s += Number($(this).val());
        })
        $('[name="orderPrice"]').val(s);
    }
</script>
</html>
